<template>
	<view>
	
			<view class="wrapper">
				<view class="cont">
					<view class="fill_info_line">
						<view class="fill_info_title">卖方姓名</view>
						<view class="fill_info_another checkbox_line">
							<view class="uni-input">{{ datainfo.user.user_name }}</view>
						</view>
					</view>

					<view class="fill_info_line">
						<view class="fill_info_title">卖方手机号</view>
						<view class="fill_info_another checkbox_line">
							<view class="uni-input">{{ datainfo.user.mobile }}</view>
						</view>
					</view>

					<view class="fill_info_line">
						<view class="fill_info_title">购买DT通证数</view>
						<view class="fill_info_another checkbox_line">
							<view class="uni-input">{{ datainfo.uninvest.uuniJiner }}</view>
						</view>
					</view>

					<view class="fill_info_line">
						<view class="fill_info_title">匹配时间</view>
						<view class="fill_info_another checkbox_line">
							<view class="uni-input">{{ datainfo.uninvest.uuniDate }}</view>
							<text style="color: red; font-size: 24upx;">({{ datainfo.uninvest.needpaytime }}前支付无需扣除信誉点)</text>
						</view>
					</view>
					
					
					<view class="fill_info_line" v-if="datainfo.uninvest.uuniPay">
						<view class="fill_info_title">付款时间</view>
						<view class="fill_info_another checkbox_line">
							<view class="uni-input">{{ datainfo.uninvest.uuniPayDate || '暂未支付' }}</view>
						</view>
					</view>

					<view class="fill_info_line">
						<view class="fill_info_title">付款方式</view>
						<view class="fill_info_another checkbox_line" >
							<radio-group class="uni-list" @change="pay_chage">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in payItems" :key="index" style="font-size: 24upx;">
									<radio
										:disabled="datainfo.uninvest.uuniPay ==1"
										:id="item.value"
										style="transform:scale(0.7)"
										:value="item.value"
										:checked="item.value == (datainfo.uninvest.uuniPayWay || submitInfo.way)"
									></radio>
									<label class="label-2-text" :for="item.value">
										<text>{{ item.name }}</text>
									</label>
								</label>
							</radio-group>
						</view>
					</view>

					<view class="fill_info_line" v-if="false && !datainfo.uninvest.uuniPay ">
						
						
						<radio-group class="uni-list" @change="pic_chage">
							<view class="uni-padding-wrap uni-common-mt" v-for="(item, index) in datainfo.accountsList" :key="index">
								<view class="uni-flex uni-column topmargin" v-if="item.ispic ==1">
									<view class="flex-item">
										<radio :id="item.id" style="transform:scale(0.9)" :value="item.picurl"></radio>
										{{ item.type }}(点击图片保存)
									</view>
									<view>
										<view>
											<image :src="getimg + item.picurl" @click="savepic(getimg + item.picurl)" class="tui-pro-img" style="height: 60vw;width: 46vw;"></image>
										</view>
									</view>
								</view>
								<view class="uni-flex uni-column topmargin" v-else>
									<view class="flex-item">
										<radio :id="item.id" style="transform:scale(0.9)" :value="item.accounts"></radio>
										{{ item.type }}(点击姓名账号复制)
									</view>
								
									<view><text @click="copyTxt(item.name)">{{item.name}}</text>-<text  @click="copyTxt(item.accounts)">{{item.accounts}}</text> </view>
									
								</view>
								
								
							</view>
						</radio-group>
					</view>


					<view class="cont" v-if="false && !datainfo.uninvest.uuniMoneyImages">
						<view class="fill_info_line">
							<view class="fill_info_title">上传截图</view>
							<view class="fill_info_cont clearfix">
								<view class="photo_sign" @click="upload">
									<image src="../../static/icon/plus.png" v-model="submitInfo.img" mode="" class="photo_icon"></image>
									<view class="photo_text_b">上传图片</view>
									<view class="photo_text_s">仅支持JPG,PNG,JPEG</view>
									<view class="photo_text_s">BMP格式文件</view>
								</view>
							</view>
						</view>
					</view>

					<view class="cont" v-if="datainfo.uninvest.uuniPayWay !=2 && datainfo.uninvest.uuniMoneyImages">
						<image :src="getimg + datainfo.uninvest.uuniMoneyImages"></image>
						</view>
						
						
							

					<view class="fill_info_line" v-if="!datainfo.uninvest.uuniPay">
						<view class="fill_info_title">当前USDT余额</view>
						<view class="fill_info_another checkbox_line">
							<view class="uni-input">{{ datainfo.self.uMoney }}</view>
						</view>
					</view>
					
					
					<view class="fill_info_line" >
						<view class="fill_info_title">支付密码</view>
						<view class="fill_info_another checkbox_line">
							<input class="input" type="password" v-model="submitInfo.uZfPwd" placeholder="支付密码" placeholder-class="placeholder" />
						</view>
					</view>
					
				</view>
				<view class="submit_btn_cont">
					<button  :class="issubmit ? 'nosubmit_btn' : 'submit_btn'" @click="submit" :disabled="issubmit">{{ datainfo.msg }}</button>
				</view>
			</view>
	
	</view>
</template>

<script>
	
	import util from '@/common/publicfunction.js';
export default {
	data() {
		return {
			submitInfo: {
				way: 2,
				img: '',
				selectimg: '',
				accounts: '',
				id:0,
				uZfPwd:''
			},
			id:0,
			datainfo: {
				uninvest: {
					uuniPayWay: 2,
					uuniMoneyImages: ''
				},
				user : {},
				self:{},
				msg:'加载中'
			},
			issubmit:true,

			payItems: [
				// {
				// 	name: '付给卖家',
				// 	value: '1'
				// },
				{
					name: '余额支付',
					value: '2'
				}
			],
			
			getimg: this.$getimg
		};
	},

	onLoad: function(e) {
		this.submitInfo.id = e.id;
		this.id = e.id;
		this.getInfo();
	},

	onPullDownRefresh() {
		// 下拉监听事件
		this.getInfo();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},

	computed: {},
	methods: {
		getInfo(e) {
			this.$api.http.get('assistance/tradinghall/yesPayInvest', { id: this.id }).then(res => {
				if (res.status == 200) {
					var data = res.data;
					this.datainfo = data;

					if (data.uninvest.uuniSuccess) this.datainfo.msg = '已成交';
					else if (data.uninvest.uuniPay) this.datainfo.msg = '已付款';
					//未确认
					else if (data.uninvest.uuniPay == 0){
						
						this.datainfo.msg = '提交';
						this.issubmit = false;
					} 
					//未确认
					else this.datainfo.msg = '未知';
				} else {
					var obj = new Object();
					obj.msg = res.msg;
					this.datainfo = obj;
				}
			});
		},

		pay_chage(e) {
			this.submitInfo.way = e.detail.value;
			this.datainfo.uninvest.uuniPayWay = e.detail.value;
		},
		pic_chage(e) {
		
				this.submitInfo.selectimg = e.detail.value;
				this.submitInfo.accounts = e.detail.value;
				
				this.submitInfo.selectid = e.detail.id;
			console.log(e);
		},

		submit() {
			var that = this;
			if(!this.submitInfo.way)
			{
				this.$api.msg("请选择付款方式");
				return false;
			}
			
			if(!this.submitInfo.uZfPwd ){
				
				this.$api.msg("请输入支付密码");
				return false;
			}
			
			
		 if(this.datainfo.uninvest.uuniPayWay ==1){ //卖家支付{
				
				if(!this.submitInfo.way)
				{
					this.$api.msg("请选择付款方式");
					return false;
				}
				if(!this.submitInfo.selectimg  || !this.submitInfo.accounts ){
					
					this.$api.msg("请选择卖家收款信息");
					return false;
				}
				if(!this.submitInfo.img ){
					
					this.$api.msg("请上传二维码");
					return false;
				}
			}else 
			{ //余额支付
				
				if (parseFloat(this.datainfo.self.uMoney)  < parseFloat(this.datainfo.uninvest.uuniJiner)) {
					uni.showToast({
						title: 'USDT余额不足，请充值',
						icon: 'none'
					});
				
					return false;
				}
			}
			

		
			uni.showModal({
				title: '操作提示',
				content: '是否确认支付？',
				success: function(res) {
					if (res.confirm && !that.issubmit) {
			
			that.issubmit = true;
			that.datainfo.msg = '提交中'; //禁用按钮
			
						that.$api.http.post('assistance/tradinghall/yesPayInvestAction',that.submitInfo).then(res => {
						
						that.$api.msg(res.msg);
						
							if (res.status == 200) {
								//成功执行
							
										uni.$emit('pay', that.id); //通知刷新列表
										setTimeout(() => {
											uni.navigateBack();
										}, 1000);
								
							
							} else {
								return false;
							}
						});
					}
				}
			});
		},
		savepic(pic) {
			this.$api.msg('正在保存');
			util.savepic(pic);
		},
copyTxt(data) {
			util.copyTxt(data);
		},
		upload: function() {
			var _self = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 //'original',
				sourceType: ['album'], //从相册选择
				success: function(res) {
					const tempFilePaths = res.tempFilePaths;
					const uploadTask = uni.uploadFile({
						url: _self.getimg + '/index/upload/uploadImgNoData',
						filePath: tempFilePaths[0],
						name: 'img',
						formData: {
							use: 'payimg',
							back: 'idurl'
						},
						success: uploadFileRes => {
							var res = JSON.parse(uploadFileRes.data);

							if (res.status == 200) {
								_self.$api.msg('上传成功');
								_self.submitInfo.img = res.data.url;
								_self.datainfo.uninvest.uuniMoneyImages =  _self.submitInfo.img;
							} else _self.$api.msg(res.msg);
						}
					});

					/* uploadTask.onProgressUpdate(function (res) {
		 
			
		 }); */
				},
				error: function(e) {
					console.log(e);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.remind {
	color: #f1c013;
	font-size: 26upx;
}

.clearfix {
	zoom: 1;
	display: block;
}

.noShow {
	display: none;
}

.clearfix:after {
	content: '.';
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}



	.wrapper {
		
		background-color: #f5f5f5;
		height: 100vh;
		padding: 20upx;
		
		
		.fill_header {
			border-radius: 5upx;
			background-color: #ffffff;
			padding: 40upx;
			margin-bottom: 20upx;
			.fill_header_title {
				font-size: 26upx;
			}
			.fill_header_cont {
				margin-top: 30upx;
				.photo_img_cont {
					border: 1upx solid hsla(0, 0%, 60%, 0.3);
					width: 120upx;
					height: 120upx;
					padding: 20upx;

					.photo_img {
						width: 80upx;
						height: 80upx;
					}
				}
			}
		}

		.cont {
			border-radius: 5upx;
			background-color: #ffffff;
			padding: 40upx;

			.fill_info_line {
				margin-top: 30upx;

				.fill_info_title {
					font-size: 26upx;
				}

				.fill_info_cont {
					position: relative;
					border-bottom: 1upx solid hsla(0, 0%, 60%, 0.3);

					.pwdInput {
						font-size: 26upx;
						height: 80upx;
						line-height: 80upx;
						border: none;
						display: block;
						outline: none;
					}

					.pwd_icon {
						width: 85upx;
						height: 85upx;
						-webkit-transform: scale(0.4);
						transform: scale(0.4);
						position: absolute;
						top: 0;
						right: 0;
					}
				}
				.fill_info_another {
					border-bottom: 1upx solid hsla(0, 0%, 60%, 0.3);
					margin-top: 24upx;
					label {
						font-size: 14upx;
					}
				}
				.checkbox_line {
					padding: 0 0px 14px;
					.uni-input {
						text-indent: 0;
						background: #ffffff;
					}
				}
			}

			.fill_info_line:first-child {
				margin-top: 0;
			}
		}
	}

	.submit_btn_cont {
		margin-top: 20upx;

		.submit_btn {
			border-radius: 5upx;
			color: #ffffff;
			font-size: 26upx;
			background: linear-gradient(90deg, #4e8cff, #2f79ff);
		}

		.nosubmit_btn {
			border-radius: 5upx;
			color: #ffffff;
			font-size: 26upx;
			background: linear-gradient(90deg, #c6c5c5, #cdced0);
		}
	}


.photo_sign {
	background-color: #fafafa;
	text-align: center;
	width: 240upx;
	height: 240upx;
	color: #dcdcdc;
	.photo_icon {
		width: 60upx;
		height: 60upx;
		margin: 26upx 0 10upx;
	}
	.photo_text_b {
		font-size: 18upx;
	}
	.photo_text_s {
		margin-top: 6upx;
		font-size: 16upx;
	}
	.photo_preview {
		width: 100%;
		height: 100%;
	}
}
</style>
